<script setup lang="ts">
import {ref} from "vue";
import {graphic} from "echarts/core";
import {countUserNum} from "@/api";
import {ElMessage} from "element-plus"

let colors = ["#0BFC7F", "#F48C02", "#F4023C", "#A0A0A0"];
const colorList = [["#0BFC7F", "#A3FDE0"], ["#A0A0A0", "#DBDFDD"], ["#F48C02", "#FDDB7D"], ["#F4023C", "#FB6CB7"]]
const echartsGraphic = (colors: string[]) => {
  return new graphic.LinearGradient(1, 0, 0, 0, [
    {offset: 0, color: colors[0]},
    {offset: 1, color: colors[1]},
  ]);
};

const option = ref({});
const state = ref([
  {
    value: 0,
    name: "",
    itemStyle: {
      color: echartsGraphic(["#F48C02", "#FDDB7D"])
    }
  }
]);
const total = ref(0);

const getData = () => {
  countUserNum().then((res) => {
    console.log("左中--用户总览", res);
    if (res.success) {
      const result = (res.data as any[]).filter(i => i.buildingType != "total").sort((a, b) => b.count - a.count).map((i,item) => {
        return {
          value: i.count,
          name: i.buildingType,
          itemStyle: {
            color: echartsGraphic(colorList[item])
          }
        }
      });
      state.value = result;
      total.value = (res.data as any[]).find(i => i.buildingType == "total").count
      console.log("结果", state.value)
      setOption();
    } else {
      ElMessage.error(res.msg)
    }
  }).catch(err => {
    ElMessage.error(err)
  });
};
getData();


const setOption = () => {
  option.value = {
    title: {
      top: "center",
      left: "center",
      text: [`{value|${total.value}}`, "{name|总数}"].join("\n"),
      textStyle: {
        rich: {
          value: {
            color: "#ffffff",
            fontSize: 24,
            fontWeight: "bold",
            lineHeight: 20,
            padding: [4, 0, 4, 0]
          },
          name: {
            color: "#ffffff",
            lineHeight: 20,
          },
        },
      },
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    series: [
      {
        name: "建筑类型总览",
        type: "pie",
        radius: ["40%", "70%"],
        // avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 6,
          borderColor: "rgba(255,255,255,0)",
          borderWidth: 2,
        },
        color: colors,
        label: {
          show: true,
          formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
          //   position: "outside",
          rich: {
            b: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 26,
            },
            c: {
              color: "#31ABE3",
              fontSize: 14,
            },
            per: {
              color: "#31ABE3",
              fontSize: 14,
            },
          },
        },
        emphasis: {
          show: false,
        },
        legend: {
          show: false,
        },
        tooltip: {show: true},

        labelLine: {
          show: true,
          length: 20, // 第一段线 长度
          length2: 36, // 第二段线 长度
          smooth: 0.2,
          lineStyle: {},
        },
        data: state.value,
      },
    ],
  };
};
</script>

<template>
  <v-chart class="chart" :option="option"/>
</template>

<style scoped lang="scss"></style>
